<template>
  <el-dialog :visible.sync="dialogVisible" title="个人账户类型" @close="closeModal">
    <el-table v-loading="listLoading" :data="typeList" border fit highlight-current-row style="width: 100%">
      <el-table-column type="index" label="序号" width="50"/>
      <el-table-column label="类型名称">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-input v-model="scope.row.name" class="edit-input" size="small"/>
          </template>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-input v-model="scope.row.remark" class="edit-input" size="small"/>
          </template>
          <span v-else>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.edit">
            <!--修改-->
            <span v-if="scope.row.id">
              <el-button type="text" size="small" @click="saveUpdate(scope.row)">确定</el-button>
              <el-button class="cancel-btn" size="small" type="text" @click="cancelEdit(scope.row)">取消</el-button>
            </span>
            <!--增加-->
            <span v-else>
              <el-button type="text" size="small" @click="saveAdd(scope.row)">保存</el-button>
              <el-button class="cancel-btn" size="small" type="text" @click="removeLocal(scope.$index,scope.row)">删除</el-button>
            </span>
          </span>
          <span v-else>
            <el-button type="primary" size="small" icon="el-icon-edit" circle @click="scope.row.edit=true"/>
            <el-button type="danger" size="small" icon="el-icon-delete" circle @click="remove(scope.$index,scope.row)"/>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div align="middle" style="margin-top: 20px">
      <el-button type="primary" size="small" icon="el-icon-plus" circle @click="add"/>
    </div>
  </el-dialog>
</template>

<script>
import { getUserType, addUserType, updateUserType, deleteUserType } from '../../../api/password/userPassword';
export default {
  name: 'UserAccountType',
  props: {
    count: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      listLoading: false,
      dialogVisible: false,
      typeList: [],
      accountType: {
        'edit': true,
        'id': null,
        'name': null,
        'remark': null
      }
    };
  },
  watch: {
    count(val) {
      this.dialogVisible = true;
      getUserType().then(response => {
        const items = response.data;
        this.typeList = items.map(v => {
          // 必须。没有这步的话，不能同步更新edit字段
          this.$set(v, 'edit', false);
          v.originalName = v.name;
          v.originalRemark = v.remark;
          return v;
        });
      });
    }
  },
  methods: {
    closeModal() {
    },
    saveAdd(row) {
      row.edit = false;
      addUserType(row.name, row.remark).then(response => {
        row.id = response.data.id;
      });
    },
    saveUpdate(row) {
      row.edit = false;
      updateUserType(row.id, row.name, row.remark).then(response => {
        row.name = response.data.name;
        row.remark = response.data.remark;
      });
    },
    saveDelete(id) {
      deleteUserType(id).then(response => {

      });
    },
    add() {
      const type = {
        'edit': true,
        'name': '',
        'remark': ''
      };
      this.typeList.push(type);
    },

    removeLocal(index, row) {
      this.typeList.splice(index, 1);
    },
    remove(index, row) {
      this.removeLocal(index, row);
      this.saveDelete(row.id);
    },
    cancelEdit(row) {
      row.name = row.originalName;
      row.remark = row.originalRemark;
      row.edit = false;
    }
  }
};
</script>

<style scoped>

</style>
